import React, { useState } from 'react';
import { Card, Tooltip } from 'antd';
import { UnControlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/mode/sql/sql'; // SQL 语法支持
import { format } from 'sql-formatter';  // 引入 SQL 格式化库

interface Props {
  setSql: (sql: string) => void; // 回调函数，传递 SQL 给父组件
}

const SqlFunctionEditor: React.FC<Props> = ({ setSql }) => {
  const [sqlFunction, setSqlFunction] = useState<string>('');

  // SQL 格式化功能
  const formatSQL = () => {
    const formattedSQL = format(sqlFunction); // 使用 sql-formatter 格式化 SQL
    setSqlFunction(formattedSQL); // 更新格式化后的 SQL
    setSql(formattedSQL); // 传递格式化后的 SQL 给父组件
  };

  return (
    <div>
      <Tooltip title={"select columns from table ..... where column   =condition,注意需要传入的参数请在下面配置"}>
      <Card
        title={
          <div>
            SQL 函数编写
            {/* 格式化 SQL 的 a 标签 */}
            <Tooltip title="格式化 SQL">
              <a
                style={{ marginLeft: '10px', fontSize: '14px' }}
                onClick={formatSQL}
              >
                格式化SQL
              </a>
            </Tooltip>
          </div>
        }
        bordered={false}
      >
        <CodeMirror
          value={sqlFunction}
          options={{
            mode: 'text/x-sql',
            theme: 'material',
            lineNumbers: true,
          }}
          onChange={(editor, data, value) => {
            setSqlFunction(value); // 更新 SQL 内容
            setSql(value); // 传递 SQL 给父组件
          }}
        />
      </Card>
      </Tooltip>
    </div>
  );
};

export default SqlFunctionEditor;
